<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI学习智能体门户 - 前端演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus@2.8.0/dist/index.full.js"></script>
    <script src="https://unpkg.com/axios@1.6.0/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.8.0/dist/index.css">
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        .app-container {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .demo-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            max-width: 600px;
            width: 100%;
        }
        .demo-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .demo-title {
            font-size: 2rem;
            color: #333;
            margin-bottom: 10px;
        }
        .demo-subtitle {
            color: #666;
            font-size: 1rem;
        }
        .api-section {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
        }
        .api-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: #409eff;
        }
        .response-area {
            background: #f5f7fa;
            padding: 15px;
            border-radius: 6px;
            margin-top: 10px;
            font-family: monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-success { background: #67c23a; }
        .status-error { background: #f56c6c; }
        .status-warning { background: #e6a23c; }
    </style>
</head>
<body>
    <div id="app">
        <div class="app-container">
            <div class="demo-card">
                <div class="demo-header">
                    <h1 class="demo-title">🤖 AI学习智能体门户</h1>
                    <p class="demo-subtitle">前后端分离架构演示</p>
                </div>

                <el-alert 
                    title="前后端分离架构说明" 
                    type="info" 
                    :closable="false"
                    style="margin-bottom: 20px;">
                    <p>本演示展示了Vue.js前端与Django后端API的分离架构。前端通过RESTful API与后端通信。</p>
                </el-alert>

                <!-- 后端状态检测 -->
                <div class="api-section">
                    <h3 class="api-title">
                        <span :class="backendStatus.class"></span>
                        后端服务状态
                    </h3>
                    <el-button type="primary" @click="checkBackendStatus" :loading="checking">
                        检测后端连接
                    </el-button>
                    <div v-if="backendStatus.message" class="response-area">
                        {{ backendStatus.message }}
                    </div>
                </div>

                <!-- 用户认证演示 -->
                <div class="api-section">
                    <h3 class="api-title">用户认证演示</h3>
                    <el-form :model="loginForm" label-width="80px" size="small">
                        <el-form-item label="用户名">
                            <el-input v-model="loginForm.username" placeholder="输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="loginForm.password" type="password" placeholder="输入密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="testLogin" :loading="loggingIn">
                                测试登录
                            </el-button>
                            <el-button @click="testRegister" :loading="registering">
                                测试注册
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <div v-if="authResponse" class="response-area">
                        {{ authResponse }}
                    </div>
                </div>

                <!-- 智能体API演示 -->
                <div class="api-section">
                    <h3 class="api-title">智能体API演示</h3>
                    <el-button type="primary" @click="fetchAgents" :loading="fetchingAgents">
                        获取智能体列表
                    </el-button>
                    <el-button type="info" @click="fetchAgentTypes" :loading="fetchingTypes">
                        获取智能体类型
                    </el-button>
                    <div v-if="agentsResponse" class="response-area">
                        {{ agentsResponse }}
                    </div>
                </div>

                <!-- 技术栈信息 -->
                <div class="api-section">
                    <h3 class="api-title">技术栈信息</h3>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="前端框架">Vue.js 3</el-descriptions-item>
                        <el-descriptions-item label="UI组件">Element Plus</el-descriptions-item>
                        <el-descriptions-item label="后端框架">Django 5.2.6</el-descriptions-item>
                        <el-descriptions-item label="API框架">Django REST Framework</el-descriptions-item>
                        <el-descriptions-item label="数据库">SQLite / PostgreSQL</el-descriptions-item>
                        <el-descriptions-item label="状态管理">Pinia</el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElLoading } = ElementPlus;

        createApp({
            data() {
                return {
                    checking: false,
                    loggingIn: false,
                    registering: false,
                    fetchingAgents: false,
                    fetchingTypes: false,
                    backendStatus: {
                        class: 'status-indicator status-warning',
                        message: ''
                    },
                    loginForm: {
                        username: 'demo',
                        password: 'demo123456'
                    },
                    authResponse: '',
                    agentsResponse: ''
                }
            },
            mounted() {
                this.setupAxios();
                this.checkBackendStatus();
            },
            methods: {
                setupAxios() {
                    // 设置axios基础配置
                    axios.defaults.baseURL = 'http://localhost:8000/api/v1';
                    axios.defaults.timeout = 10000;
                    
                    // 请求拦截器
                    axios.interceptors.request.use(
                        config => {
                            const token = localStorage.getItem('token');
                            if (token) {
                                config.headers.Authorization = `Token ${token}`;
                            }
                            return config;
                        },
                        error => Promise.reject(error)
                    );
                    
                    // 响应拦截器
                    axios.interceptors.response.use(
                        response => response,
                        error => {
                            console.error('API Error:', error);
                            if (error.response?.status === 401) {
                                localStorage.removeItem('token');
                                ElMessage.error('认证失败，请重新登录');
                            }
                            return Promise.reject(error);
                        }
                    );
                },
                
                async checkBackendStatus() {
                    this.checking = true;
                    try {
                        const response = await axios.get('/agent-types/');
                        this.backendStatus = {
                            class: 'status-indicator status-success',
                            message: `✅ 后端连接成功！找到 ${response.data.length || 0} 个智能体类型`
                        };
                    } catch (error) {
                        this.backendStatus = {
                            class: 'status-indicator status-error',
                            message: `❌ 后端连接失败: ${error.message}\n请确保Django服务器在 http://localhost:8000 运行`
                        };
                    } finally {
                        this.checking = false;
                    }
                },
                
                async testLogin() {
                    if (!this.loginForm.username || !this.loginForm.password) {
                        ElMessage.warning('请输入用户名和密码');
                        return;
                    }
                    
                    this.loggingIn = true;
                    try {
                        const response = await axios.post('/users/login/', this.loginForm);
                        this.authResponse = `✅ 登录成功！\n用户: ${response.data.user.username}\nToken: ${response.data.token.substring(0, 20)}...`;
                        localStorage.setItem('token', response.data.token);
                        ElMessage.success('登录成功');
                    } catch (error) {
                        this.authResponse = `❌ 登录失败: ${error.response?.data?.detail || error.message}`;
                        ElMessage.error('登录失败');
                    } finally {
                        this.loggingIn = false;
                    }
                },
                
                async testRegister() {
                    if (!this.loginForm.username || !this.loginForm.password) {
                        ElMessage.warning('请输入用户名和密码');
                        return;
                    }
                    
                    this.registering = true;
                    try {
                        const registerData = {
                            ...this.loginForm,
                            email: `${this.loginForm.username}@example.com`,
                            password_confirm: this.loginForm.password
                        };
                        const response = await axios.post('/users/register/', registerData);
                        this.authResponse = `✅ 注册成功！\n用户: ${response.data.user.username}\nToken: ${response.data.token.substring(0, 20)}...`;
                        localStorage.setItem('token', response.data.token);
                        ElMessage.success('注册成功');
                    } catch (error) {
                        this.authResponse = `❌ 注册失败: ${error.response?.data?.detail || error.message}`;
                        ElMessage.error('注册失败');
                    } finally {
                        this.registering = false;
                    }
                },
                
                async fetchAgents() {
                    this.fetchingAgents = true;
                    try {
                        const response = await axios.get('/agents/');
                        this.agentsResponse = `✅ 获取成功！\n找到 ${response.data.count || response.data.length || 0} 个智能体\n${JSON.stringify(response.data, null, 2)}`;
                    } catch (error) {
                        this.agentsResponse = `❌ 获取失败: ${error.response?.data?.detail || error.message}`;
                    } finally {
                        this.fetchingAgents = false;
                    }
                },
                
                async fetchAgentTypes() {
                    this.fetchingTypes = true;
                    try {
                        const response = await axios.get('/agent-types/');
                        this.agentsResponse = `✅ 获取智能体类型成功！\n${JSON.stringify(response.data, null, 2)}`;
                    } catch (error) {
                        this.agentsResponse = `❌ 获取失败: ${error.response?.data?.detail || error.message}`;
                    } finally {
                        this.fetchingTypes = false;
                    }
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>